<template>
  <div id="app">
    <img width="100%" alt="title" src="@/assets/images/title.png">
    <div class="wrap">
      <!-- 左 -->
      <div class="left">
        <div class="item-wrap">
          <div class="item-title">
            <div class="item-title_name">
              <img class="title_icon" src="@/assets/images/xingbie.png" />
              <div class="title_name">性别与年龄分布</div>
            </div>
            <div class="largen_icon" @click="largenItem(0)"></div>
          </div>
          <div class="child1-wrap">
            <div class="pie1-wrap">
              <pieChart1 ref="ref1" style="width:7rem;height:calc((100vh - 520px)* 6 / 15)" />
              <img class="pie1-img" src="@/assets/images/nannv.png" />
              <div class="pie-info">
                <div style="color:#1EABFC">男 : 785223</div>
                <div style="color:#FAB235">女 : 210241</div>
              </div>
            </div>
            <div>
              <staggerChart ref="ref2" style="width:6rem;height:calc((100vh - 520px)* 6 / 15)" />
            </div>
          </div>
        </div>

        <div class="item-wrap">
          <div class="item-title">
            <div class="item-title_name">
              <img class="title_icon" src="@/assets/images/xinxi.png" />
              <div class="title_name">院士信息</div>
            </div>
            <div class="more-table">查看更多...</div>
            <div class="largen_icon" @click="largenItem(1)"></div>
          </div>
            <table class="cus-table">
              <thead>
                <th>姓名</th>
                <th>工作单位</th>
                <th>城市关联</th>
              </thead>
              <tbody>
                <tr v-for="(item,index) in tableData" :key="index">
                  <td>{{item.name}}</td>
                  <td>{{item.work}}</td>
                  <td>{{item.city}}</td>
                </tr>
              </tbody>
            </table>
        </div>

        <div class="item-wrap">
          <div class="item-title">
            <div class="item-title_name">
              <img class="title_icon" src="@/assets/images/zhiye.png" />
              <div class="title_name">院士当前职业分布</div>
            </div>
            <div class="largen_icon" @click="largenItem(2)"></div>
          </div>
          <pieChart2 ref="ref3" style="width:100%;height:calc((100vh - 520px)* 9 / 15)" />
        </div>
      </div>

      <!-- 中 -->
      <div class="center">
        <div class="item-wrap" style="padding-top:80px;">
          <div class="map-info">
            <div class="map-info_item">
              <div class="map-info_name">成都</div>
              <div class="map-info_sub"><img src="@/assets/images/shidian.png">试点城市</div>
            </div>
            <div class="map-info_item">
              <div class="map-info_name">123</div>
              <div class="map-info_sub"><img src="@/assets/images/changzhu.png">常驻院士</div>
            </div>
            <div class="map-info_item">
              <div class="map-info_name">123</div>
              <div class="map-info_sub"><img src="@/assets/images/chusheng.png">出生院士</div>
            </div>
            <div class="map-info_item">
              <div class="map-info_name">123</div>
              <div class="map-info_sub"><img src="@/assets/images/liuru.png">流入院士</div>
            </div>
            <div class="map-info_item">
              <div class="map-info_name">123</div>
              <div class="map-info_sub"><img src="@/assets/images/liuchu.png">流出院士</div>
            </div>
            <div class="map-info_item">
              <div class="map-info_name">123年</div>
              <div class="map-info_sub"><img src="@/assets/images/pingjun.png">平均工作时长</div>
            </div>
            <div class="largen_icon" @click="largenItem(3)"></div>
          </div>
          <mapChart ref="ref4" style="width:100%;height:calc((100vh - 260px) * 15 / 25)" />
        </div>

        <div class="item-wrap">
          <div class="item-title">
            <div class="item-title_name">
              <img class="title_icon" src="@/assets/images/gongzuoshichang.png" />
              <div class="title_name">院士工作时长</div>
            </div>
            <div class="largen_icon" @click="largenItem(4)"></div>
          </div>
          <lineChart ref="ref5" style="width:100%;height:calc((100vh - 260px) * 10 / 25)" />
        </div>
      </div>

      <!-- 右 -->
      <div class="right">
        <div class="item-wrap">
          <div class="item-title">
            <div class="item-title_name">
              <img class="title_icon" src="@/assets/images/yuanshi.png" />
              <div class="title_name">参与科创中国服务院士</div>
            </div>
            <div class="largen_icon" @click="largenItem(5)"></div>
          </div>
          <treeChart ref="ref6" style="width:100%;height:calc((100vh - 220px) * 9 / 25)" />
        </div>

        <div class="item-wrap">
          <div class="item-title">
            <div class="item-title_name">
              <img class="title_icon" src="@/assets/images/fenbu.png" />
              <div class="title_name">两院院士学部分布</div>
            </div>
            <div class="largen_icon" @click="largenItem(6)"></div>
          </div>
          <pieChart3 ref="ref7" style="width:100%;;height:calc((100vh - 220px) * 8 / 25)" />
          <div style="display:flex">
            <pieChart4 ref="ref8" style="width:50%;height:calc((100vh - 220px) * 8 / 25)" />
            <pieChart5 ref="ref9" style="width:50%;height:calc((100vh - 220px) * 8 / 25)" />
          </div>
        </div>
      </div>
    </div>

    <!-- 放大 -->
    <div v-show="maskState" class="mask" @click="maskState=false">
      <div class="largen-wrap" :class="{'full-screen':isFullScreen}"  @click.stop>
        <div style="display:flex;justify-content:flex-end;padding:4px 10px;">
          <button class="button button--default" style="margin-right:6px;" @click="switchFull">{{isFullScreen?'正常':'全屏'}}</button>
          <button class="button button--primary" @click="maskState=false">关闭</button>
        </div>
        <div class="largen-content" :class="{'full-screen':isFullScreen}">
          <div class="item-wrap" v-if="largenStates[0]">
            <div class="child1-wrap">
              <div class="pie1-wrap">
                <pieChart1 :style="{width:isFullScreen?'50vw':'500px',height:isFullScreen?'40vw':'400px'}" />
                <img class="pie1-img" style="top:50%;left:50%;" src="@/assets/images/nannv.png" />
                <div class="pie-info" style="padding:10px 30px;">
                  <div style="color:#1EABFC">男 : 785223</div>
                  <div style="color:#FAB235">女 : 210241</div>
                </div>
              </div>
              <div>
                <staggerChart :style="{width:isFullScreen?'50vw':'500px',height:isFullScreen?'40vw':'400px'}"  />
              </div>
            </div>
          </div>

          <div class="item-wrap" v-if="largenStates[1]">
              <table class="cus-table">
                <thead>
                  <th>姓名</th>
                  <th>工作单位</th>
                  <th>城市关联</th>
                </thead>
                <tbody>
                  <tr v-for="(item,index) in tableData" :key="index">
                    <td>{{item.name}}</td>
                    <td>{{item.work}}</td>
                    <td>{{item.city}}</td>
                  </tr>
                </tbody>
              </table>
          </div>

          <div class="item-wrap" v-if="largenStates[2]">
            <pieChart2 :style="{width:isFullScreen?'100vw':'1000px',height:isFullScreen?'calc(100vh - 40px)':'480px'}" />
          </div>

          <div class="item-wrap" v-if="largenStates[3]">
            <mapChart :style="{width:isFullScreen?'100vw':'1000px',height:isFullScreen?'calc(100vh - 40px)':'500px'}" />
          </div>

          <div class="item-wrap" v-if="largenStates[4]">
            <lineChart :style="{width:isFullScreen?'100vw':'1000px',height:isFullScreen?'calc(100vh - 40px)':'600px'}" />
          </div>

          <div class="item-wrap" v-if="largenStates[5]">
            <treeChart :style="{width:isFullScreen?'100vw':'1000px',height:isFullScreen?'calc(100vh - 40px)':'540px'}" />
          </div>

          <div class="item-wrap" v-if="largenStates[6]">
            <pieChart3 :style="{width:isFullScreen?'100vw':'1000px',height:isFullScreen?'calc(50vh - 40px)':'300px'}" />
            <div style="display:flex">
              <pieChart4 showDemo="true" :style="{width:isFullScreen?'50vw':'500px',height:isFullScreen?'50vh':'300px'}" />
              <pieChart5 showDemo="true" :style="{width:isFullScreen?'50vw':'500px',height:isFullScreen?'50vh':'300px'}" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pieChart1 from '@/components/pieChart1.vue'
import staggerChart from '@/components/staggerChart.vue'
import mapChart from '@/components/mapChart.vue'
import pieChart2 from '@/components/pieChart2.vue'
import treeChart from '@/components/treeChart.vue'
import lineChart from '@/components/lineChart.vue'
import pieChart3 from '@/components/pieChart3.vue'
import pieChart4 from '@/components/pieChart4.vue'
import pieChart5 from '@/components/pieChart5.vue'

import { _debounce } from '@/assets/utils/common'
export default {
  name: 'App',
  components: {
    pieChart1,
    staggerChart,
    mapChart,
    pieChart2,
    treeChart,
    lineChart,
    pieChart3,
    pieChart4,
    pieChart5
  },
  data() {
    return {
      tableData: [
        {
          name: '院士1',
          work: '工作单位1',
          city: '城市1'
        },
        {
          name: '院士2',
          work: '工作单位2',
          city: '城市2'
        },
        {
          name: '院士3',
          work: '工作单位3',
          city: '城市3'
        },
        {
          name: '院士4',
          work: '工作单位4',
          city: '城市4'
        },
        {
          name: '院士5',
          work: '工作单位5',
          city: '城市5'
        }
      ],
      maskState: false,
      largenStates: [false, false, false, false, false, false, false],
      isFullScreen: true
    }
  },
  mounted() {
    this.setRem()
    const resizeFn = _debounce(this.resetView, 1000)
    window.addEventListener('resize', resizeFn)
  },
  methods: {
    resetView() {
      this.setRem()
      this.reRender()
    },
    setRem() {
      const dEl = document.documentElement
      const ft = dEl.clientWidth
      if (ft > 1200) {
        dEl.style.fontSize = (ft / 60) + 'px'
      } else {
        dEl.style.fontSize = 20 + 'px'
      }
    },
    largenItem(i) {
      this.isFullScreen = false
      this.largenStates = new Array(7).fill(false)
      this.$set(this.largenStates, i, false)
      this.$nextTick(() => {
        this.$set(this.largenStates, i, true)
      })
      this.maskState = true
    },
    // 重新渲染
    reRender() {
      for (let i = 1; i <= 9; i++) {
        this.$nextTick(() => {
          this.$refs['ref' + i].resize()
        })
      }
    },
    // 全屏切换
    switchFull() {
      this.isFullScreen = !this.isFullScreen
      for (const i in this.largenStates) {
        if (this.largenStates[i]) {
          this.$set(this.largenStates, i, false)
          this.$nextTick(() => {
            this.$set(this.largenStates, i, true)
          })
          return
        }
      }
    }
  }
}
</script>

<style lang="less">
body{
  font-size:14px;
  background: #F8F8F8;
}
.cus-table{
  width:100%;
  border-collapse:collapse;
  thead{
    height:30px;
    line-height:30px;
    border-bottom:1px solid rgba(65, 69, 74,.1);
  }
  th{
    font-size: 16px;
    font-weight: bold;
    color: #007AFF;
  }
  tbody td{
    height:36px;
    line-height:36px;
  }
  tbody tr:nth-child(2n){
    background: rgba(0, 122, 255, 0.09);
    border-radius: 16px;
  }
  td{
    font-size: 16px;
    font-weight: bold;
    color: #7C7D7E;
    line-height: 44px;
  }
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  min-width:1200px;
  margin:0 auto;
}
.wrap{
  display: flex;
  .left{
    padding:10px 20px;
    box-sizing: border-box;
    // flex:1;
    width:25%;
  }
  .center{
    padding:20px 0;
    box-sizing: border-box;
    // flex:2;
    width:50%;
  }
  .right{
    padding:10px 20px;
    box-sizing: border-box;
    // flex:1;
    width:25%;
  }
  .item-wrap{
    position:relative;
    margin-bottom:10px;
    border-radius: 10px;
    background:#fff;
    box-shadow: 0 0 5px 1px #c1ebfa;
  }
  .item-title{
    display: flex;
    padding:10px;
    line-height: 30px;
    justify-content: space-between;
    align-items: center;
    .item-title_name{
      display: flex;
      font-size: 20px;
      font-weight: bold;
      color: #666;
      align-items: center;
    }
    .title_icon{
      margin-right:10px;
      width:22px;
      height:20px;
    }
    .largen_icon{
      width:22px;
      height:23px;
      background:url(~@/assets/images/largen.png) no-repeat;
      background-size: cover;
      cursor: pointer;
    }
  }
  .more-table{
    position: absolute;
    right:60px;
    cursor: pointer;
  }
}
.map-info{
  position: absolute;
  z-index: 10;
  left:0;
  top:0;
  box-sizing: border-box;
  padding:0 10px;
  width:100%;
  height:82px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color:#007AFF;
  background:rgba(255,255,255,.6);
  .largen_icon{
    width:22px;
    height:23px;
    background:url(~@/assets/images/largen.png) no-repeat;
    background-size: cover;
    cursor: pointer;
  }
  .map-info_name{
    font-size:28px;
  }
  .map-info_sub{
    display: flex;
    align-items: center;
    img{
      margin-right:4px;
      width:20px;
      height:20px;
    }
  }
}
.child1-wrap{
  display: flex;
  .pie1-wrap{
    position: relative;
  }
  .pie1-img{
    position: absolute;
    margin-top:-15px;
    top:50%;
    left:50%;
    width:50px;
    height:50px;
    transform: translate(-50%,-50%);
  }
  .pie-info{
    display:flex;
    padding:0 4px;
    line-height:30px;
    justify-content:space-between;
    font-size:16px;
  }
}
.mask{
  position: fixed;
  z-index:10;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.6);
  overflow: auto;
}
.largen-wrap{
  position: absolute;
  left:50%;
  top:60px;
  transform: translateX(-50%);
  width:1000px;
  background:#fff;
  box-shadow: 0 0 10px 2px rgba(255,255,255,.6);
  border-radius: 10px;
  &.full-screen{
    left:0;
    top:0;
    width:100%;
    transform: translateX(0);
    border-radius: 0;
  }
}
.largen-content{
  max-height:calc(100vh - 160px);
  overflow:auto;
  &.full-screen{
    max-height:calc(100vh - 40px);
  }
}
.button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 8px 20px;
    font-size: 14px;
    border-radius: 4px;
    color: #000;
}
.button--default {
    color: #606266;
}
.button--default:focus,.button--default:hover{
    color: #3a8ee6;
    border-color: #3a8ee6;
    outline: none;
}

.button--primary {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff
}

.button--primary:focus,.button--primary:hover {
    background: #66b1ff;
    border-color: #66b1ff;
    color: #fff
}

</style>
